import React, { Component } from "react";

export default class Tab extends Component {
  state = {
    tab: ["语文", "数学", "英语"],
    count: this.props.check,
    // props是只读状态 所以改变不了props  讲props的初始值赋值给count
  };
  changeCount = (index) => {
    this.setState({
      count:index
    });
  }; 
  render() {
    const { tab, count } = this.state;
    const { list, check } = this.props;
    return (
      /*  <div>
        <div className='tab'>
          {
            tab.map((item,index) => {
              return <span
                className={ index === count ? "active" : ""}
                onClick={() => {
                  this.changeCount(index)
                }}
                key={index}> 
                {item}
              </span>
            })
          }
        </div>
        <div>
          {tab[count] }
        </div>
      </div>  */
      <div>
        <div className="tab">
          {list.map((item, index) => {
            return (
              <span
                className={index === count ? "active" : ""}
                onClick={() => {
                  this.changeCount(index);
                }}
                key={index}
              >
                {item}
              </span>
            );
          })}
        </div>
        <div>{list[count]}</div>
      </div>
    );
  }
}
